<template>
  <Head></Head>
  <section  class="banner-box">
    <van-swipe
      lazy-render
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      v-if="bannerList.length > 0"
    >
      <van-swipe-item v-for="item in bannerList" :key="item.id" class="content">
        <router-link :to="`/detail/${item.id}`">
          <img :src="item.image" alt="" />
          <div class="mark">
            <h3 class="title">{{ item.title }}</h3>
            <span class="tip">{{ item.hint }}</span>
          </div>
        </router-link>
      </van-swipe-item>
    </van-swipe>
  </section>
  <van-skeleton v-if="newsList.length == 0" title :row="5" />

  <div class="news" v-else>
    <div v-for="(item, index) in newsList" :key="index">
      <van-divider v-if="index !== 0" content-position="left"
        >{{ formatTime(item.date) }}</van-divider
      >
      <Item  v-for="item2 in item.stories" :key="item2.id" :data="item2"></Item>
    </div>
   
  </div>
   <div class="lazy-more" ref="loadMore"  v-show="newsList.length !== 0" >
      <van-loading  size="12px">加载中...</van-loading>
    </div>
</template>

<script>
import { onMounted, reactive, toRefs, ref, onBeforeMount } from "vue";
import { getNews, newsBefore } from "../api/index.js";
import Head from "../components/Head.vue";
import Item from "../components/Item.vue";
import { formatTime } from '../untils/utils.js'
import { useStore } from 'vuex'
export default {
  components: { Head, Item },
  name: "Home",
  setup() {
    let state = reactive({
      today: "",
      newsList: [],
      bannerList: [],
    });

    let loadMore = ref(null);

    let store = useStore()

    onBeforeMount(() => {
      getNews().then((res) => {
        let { date, stories, top_stories } = res;
        state.newsList.push(
          Object.freeze({
            date,
            stories,
          })
        );
        state.bannerList = Object.freeze(top_stories);
        console.log(state.newsList);
      }); 
    });
   
    onMounted(() => {
      store.dispatch('changeIsLoginAsync')
       console.log(loadMore.value)
       let ob = new IntersectionObserver(changes => {
        let item = changes[0];
        if(item.isIntersecting) {
        newsBefore({time:state.newsList[state.newsList.length-1].date}).then(res => { state.newsList.push(Object.freeze(res))})
         
        }
      })
      console.log(loadMore.value)
      ob.observe(loadMore.value)
    })

    return {
      ...toRefs(state),loadMore,formatTime
    };
  },
};
</script>

<style lang="less" scoped>
.banner-box {
  box-sizing: border-box;
  height: 375px;
  background: #d5d5d5;
}
.my-swipe .van-swipe-item {
  z-index: 1;

  img {
    height: 100%;
    width: 100%;
  }
  .content {
    position: relative;
  }
  .mark {
    position: absolute;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    padding: 10px 20px;
    width: 100%;
    height: 110px;
    // background: rgba(116, 116, 116, 0.3);
    // background: -webkit-linear-gradient(top,rgba(0,0, 0, 0.1),rgba(0,0, 0, 0.5));
    color: white;
  }
  .title {
    margin-right: 50px;
    font-size: 20px;
    line-height: 25px;
    overflow: hidden;
  }
}
:deep(.van-swipe__indicators) {
  left: auto;
  right: 15px;
  transform: none;
  .van-swipe__indicator--active {
    width: 15px;
    border-radius: 3px;
    background: #fff;
  }
}

.news {
  padding: 10px 15px;
}
.van-skeleton {
  padding: 20px 15px;
}
.lazy-more{
  display: flex;
  justify-content: center;
 align-items: center;
 background: #f4f4f4;
}
</style>
